<template>
	<view class="member">
		<!-- 顶部导航 -->
		<diyNavBar value='会员等级' color='#FF6F30' :fixed="true"></diyNavBar>
		<view class="head-nav"></view>
		<!-- 顶部 -->
		<view class="top">
			<image class="header" :src="member.avatar" mode="aspectFill"></image>
			<view class="t-right">
				<view class="t-name">{{member.levelname}}</view>
				<view class="time-box">
					<text class="tr-title">到期时间：</text>
					<text class="right" v-if="member.member_level>1">{{userinfo.level_time}}</text>
					<text class="right" v-else>无</text>
				</view>
			</view>
		</view>
		<!-- member会员 -->
		<scroll-view :scroll-x='true' class="scroll-box" :scroll-with-animation="true">
			<view class="s-item" :class="current == index ? 's-item-hover' : ''" v-for="(item,index) in getList"
				:key="index" @click="current = index">{{item.title}}</view>
		</scroll-view>

		<swiper class="swiper" :current="current" @change='swiperChange'>
			<swiper-item v-for="(item,index) in getList" :key="index">
				<view class="sw-item">
					<view class="sw-title">{{item.title}}</view>
					<view class="sw-time" v-if="member.member_level == item.id && userinfo.level_status == 1">
						到期时间：
						<text style="color: #FF6F30;">{{userinfo.level_time}}</text>
					</view>
					<view class="num-txt">1、发布任务，手续费{{Number(item.task_fee)}}%</view>
					<view class="num-txt">2、提现，手续费{{Number(item.tx_fee)}}%</view>
					<view class="num-txt">3、置顶折扣{{Number(item.zd_fee)}}%</view>
					<view class="num-txt">4、赠送置顶{{item.topping}}小时</view>
					<view class="num-txt">5、每日发布任务次数{{item.task_count}}次</view>
					<view class="num-txt">6、邀请好友开通会员返利分成：
						<text style="color: #FF6F30;">一级{{Number(item.zt_one)}}%</text>，
						<text style="color: #FF6F30;">二级{{Number(item.zt_two)}}%</text>，
						<text style="color: #FF6F30;">团队奖{{Number(item.zt_tree)}}%</text>，
					</view>
					<view class="sw-btn" @click="recharge" v-if="member.member_level != item.id">开通{{item.price}}元
						<text v-if="item.yfcount == 6">（半年）</text>
						<text v-else-if="item.yfcount == 12">（一年）</text>
						<text v-else>（{{item.yfcount}}月）</text>
					</view>
					<view class="sw-btn" v-else>生效中</view>
				</view>
			</swiper-item>
		</swiper>

		<view class="tips">
			*温馨提示：开通会员不可退费，请确认后开通
		</view>

		<!-- 支付弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="payment-box">
				<view class="item" v-for="(item,index) in paymenttype" :key="index" @click="paymentindex = index">
					<view class="item-left">
						<text class="iconfont" :class="item.icon"></text>
						{{item.name}}
					</view>
					<view class="right" v-if="paymentindex == index">
						<view class="center"></view>
					</view>
				</view>
				<button class="close" @click="btn">确定</button>
			</view>
		</uni-popup>

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default {
		components: {
			diyNavBar,
			loadingCover
		},
		data() {
			return {
				//轮播图切换下标
				current: 0,
				//轮播图参数
				options: {
					effect: 'coverflow',
					centeredSlides: true,
					slidesPerView: 'auto',
					initialSlide: 0,
					coverflowEffect: {
						rotate: 0,
						stretch: -30,
						depth: 200,
						modifier: 1,
						slideShadows: true,
					},
				},
				privilegeList: [{
					name: '高佣金'
				}, {
					name: '任务刷新'
				}, {
					name: '专属客服'
				}],
				getList: [], //会员数据
				swiperIndex: 0, //当前指示点所在位置
				paymenttype: [], //支付方式
				paymentindex: 0, //支付方式选中
				judge: false,
				member: {},
				code: '',
				selectIndex: 0,
				userinfo: {}

			}
		},
		onShow() {
			this.getdata()
			// #ifdef H5
			let url = window.location.href;
			const code = this.getParam('code');
			if (code) {
				this.code = code
				this.swiperIndex = this.getParam('state');
				uni.showLoading({
					title:"支付中..."
				})
				setTimeout(() => {
					this.btn();
				}, 500)
			}
			// #endif

			this.$http.sendrequest('/member/memberInfo', {}, {
				tokenJudge: true
			}).then(res => {
				this.userinfo = res.data.member;
			})
		},
		methods: {
			//轮播华东
			swiperChange(e) {
				this.current = e.detail.current;
			},
			//充值
			recharge() {
				this.$refs.popup.open();
			},
			getParam(name) {
				var search = document.location.search;
				//alert(search);
				var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
				var matcher = pattern.exec(search);
				var items = null;
				if (null != matcher) {
					try {
						items = decodeURIComponent(decodeURIComponent(matcher[1]));
					} catch (e) {
						try {
							items = decodeURIComponent(matcher[1]);
						} catch (e) {
							items = matcher[1];
						}
					}
				}
				return items;
			},
			//监听swiper
			onChange(swiper, index) {
				this.swiperIndex = index;
			},
			// 开通
			btn() {
				if (this.judge) return false;
				this.judge = true;
				// #ifdef H5
				if (this.paymenttype[this.paymentindex].id == 1) {
					if (!this.code) {
						let appid = 'wx22e93a7eadd13427';
						let redirect_uri = encodeURIComponent('http://hanbang.diruankeji.com/h5/pages/member/member');
						let url =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${encodeURIComponent(this.money)}#wechat_redirect&money=${this.money}`;
						location.href = url;
						return;
					}
				}
				// #endif
				let data = {
					pay_type: this.paymenttype[this.paymentindex].id,
					price: this.getList[this.current].price,
					id: this.getList[this.current].id,
				}
				if (this.code) data.code = this.code

				let payType = 'wxpay'; //微信
				if (this.paymenttype[this.paymentindex].id == 1) {
					// #ifdef APP
					data.pay_type = 3
					// #endif
				}
				if (this.paymenttype[this.paymentindex].id == 2) {
					payType = 'alipay'; //支付宝
					// #ifdef APP
					data.pay_type = 4
					// #endif
				}
				this.$http.sendrequest('/recharge/Czmember', data, {
					tokenJudge: true
				}).then(res => {
					this.judge = false;
					let payData = res.data.pay
					if (res.code == 1) {
						switch (this.paymentindex) {
							case 5:
								location.href = res.data.pay
								break;
							default:
								// #ifdef APP
								uni.requestPayment({
									provider: payType,
									orderInfo: payData,
									success: res => {
										console.log("返回的支付数据", res)
									},
									fail: err => {
										console.log("err", err)
									}
								})
								// #endif
								// #ifdef H5
								if (this.paymenttype[this.paymentindex].id == '1') {
									let that = this;
									if (WeixinJSBridge) {
										uni.hideLoading()
										WeixinJSBridge.invoke('getBrandWCPayRequest', {
											appId: res.data.pay.appId,
											timeStamp: res.data.pay.timeStamp,
											nonceStr: res.data.pay.nonceStr, // 支付签名随机串，不长于 32 位
											package: res.data.pay.package,
											signType: res.data.pay.signType,
											paySign: res.data.pay.paySign, // 支付签名
										}, function(r) {
											that.r = JSON.stringify(r)
											// 支付成功后的回调函数
											if (r.err_msg.includes('ok')) {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													success: () => {
														that.$util.redirectTo(
															'/pages/personal/personal', {},
															'switchTab');
													}
												})
											} else if (r.err_msg.includes('cancel')) {
												uni.showToast({
													title: '支付失败',
													icon: 'none',
													success: () => {
														that.$util.redirectTo(
															'/pages/personal/personal', {},
															'switchTab');
													}
												})
											}
										});
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
										const div = document.createElement('div')
										div.innerHTML = res.data.pay;
										document.body.appendChild(div)
										if (document.getElementById('alipay_submit')) {
											document.getElementById('alipay_submit').submit()
										} else if (document.getElementById('pay_form')) {
											document.getElementById('pay_form').submit()
										}
									}
								}
								// #endif
						}
						this.$refs.popup.close();
					}
				})
			},
			//支付方式/会员列表
			getdata() {
				this.$http.sendrequest('/member/MemberLevelList', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.getList = res.data
					}
				})
				this.$http.sendrequest('/member/memberId', {}, {
					tokenJudge: true
				}).then(res => {
					if (res.code == 1) {
						this.member = res.data;
					}
				})
				this.$http.sendrequest('/payment/PaymentList').then(res => {
					if (res.code == 1) {
						this.paymenttype = res.data;
						this.paymenttype.forEach(item => {
							switch (item.name) {
								case '微信':
									item.icon = 'icon-weixin'
									break;
								case '支付宝':
									item.icon = 'icon-zhifubao'
									break;
							}
						})
						this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.member {
		padding: 88rpx 0 0;
		min-height: 100vh;
		background: #f7f7f7;
	}

	.top {
		height: 192rpx;
		background: #FF6F30;
		font-family: PingFang SC;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;

		.header {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}

		.t-right {
			margin-left: 30rpx;
			min-height: 80rpx;

			.t-name {
				font-size: 26rpx;
				color: #fff;
			}

			.time-box {
				color: #fff;
				font-size: 26rpx;
				margin-top: 22rpx;
			}
		}

	}

	.scroll-box {
		white-space: nowrap;
		display: inline-block;
		width: 100%;
		height: 60rpx;
		background: #FFFFFF;
		padding: 10rpx 0;

		.s-item {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			position: relative;
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
		}

		.s-item-hover::after {
			width: 50%;
			content: '';
			height: 4rpx;
			background: red;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.payment-box {
		width: 650rpx;
		min-height: 360rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, .04);

			.right {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 2rpx solid $uni-tabbar-hovercolor;
				display: flex;
				align-items: center;
				justify-content: center;

				.center {
					background: $uni-tabbar-hovercolor;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
				}
			}

			.item-left {
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 60rpx;
					margin-right: 30rpx;
				}
			}
		}

		.close {
			text-align: center;
			margin-top: 50rpx;
			font-size: 34rpx;
			background: $uni-tabbar-hovercolor;
			color: #FFFFFF;
			border-radius: 90rpx;
			height: 90rpx;
		}
	}

	.swiper {
		height: 60vh;

		.sw-item {
			height: 60vh;
			margin: 30rpx;
			border-radius: 20rpx;
			background: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;

			.sw-title {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.sw-time {
				margin-bottom: 20rpx;
				font-size: 24rpx;
			}

			.num-txt {
				font-size: 24rpx;
				margin-top: 10rpx;
				line-height: 1.8;
			}

			.sw-btn {
				position: absolute;
				bottom: 60rpx;
				width: 300rpx;
				background: #FF6F30;
				border-radius: 10rpx;
				color: #fff;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.tips {
		font-size: 24rpx;
		width: 100%;
		margin-top: 20rpx;
		color: rgba(0, 0, 0, .4);
		text-align: center;
	}

	.icon-zhifubao {
		color: #22ABFF !important;
	}

	.icon-weixin {
		color: #34C758 !important;
	}
</style>